<template>
    <div class="record">
        <table class="list-table" border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>
                    <span class="icon add" @click="openAddForm()"></span>
                </th>
                <th>姓名</th>
                <th>学历</th>
                <th>应聘职务</th>
                <th>联系方式</th>
                <th>状态</th>

            </tr>
            </thead>
            <tbody>
            <tr v-for="item in procedureData" :key="item.id">
                <td>
                    <span class="icon del" @click="Del(item.id)"></span>
                    <span class="icon det" @click="onDetail(item.id)"></span>
                </td>
                <td>{{item.name}}</td>
                <td>{{item.education_background}}</td>
                <td>{{item.duty}}</td>
                <td>{{item.contact_way}}</td>
                <td>{{item.status}}</td>

            </tr>
            </tbody>
        </table>
        <div class="page">
            <div class="block">
                <el-pagination
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next, jumper"
                        :total="pageTotal">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="招聘/入职信息" :visible.sync="popShow" size="tiny">
            <el-form :model="ruleForm" ref="procedureRulesName" label-width="200px" :rules="procedureRules">
                <el-form-item label="姓名" prop="name">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.name" size="small" placeholder="请输入姓名"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="学历">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.education_background" size="small"
                                  placeholder="请输入学历"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="应聘职务">
                    <el-col :span="15">
                        <el-select v-model="ruleForm.duty" placeholder="请选择" size="small">
                            <el-option v-for="item in staffType" :label="item.name" :value="item.name"
                                       :key="item.id"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.contact_way" size="small" placeholder="请输入联系方式"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="状态" prop="state">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.status" size="small" placeholder="请输入状态"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import ElCol from "element-ui/packages/col/src/col";

    const procedure = {
        name: '',
        education_background: '',
        duty: '',
        contact_way: '',
        status: ''
    };
    export default {
        components: {ElCol},
        data() {
            return {
                popShow: false,
                procedureData: {},
                ruleForm: _g.cloneJson(procedure),
                pageTotal: 1,
                pageIndex: 1,
                staffType: [],
                procedureRules: {
                    name: [{required: true, message: "请填写姓名", trigger: "blur"}]
                },
            }
        },

        created() {
            this.getDetail();
            this.getTypes();
        },

        methods: {
            onDetail(id) {
                router.push('/operate/manpower/recruitDetail/' + id)
            },

            handleCurrentChange(val) {
                this.pageIndex = val;
            },

            getDetail() {
                let data = {page: this.pageIndex};
                this.apiPost("Operation/procedure", data).then(res => {
                    this.procedureData = res.list;
                    this.pageTotal = res.total;
                });
            },
            getTypes() {
                this.apiPost("System/staffTypeLists",).then(res => {
                    this.staffType = res;
                });
            },

            openAddForm() {
                this.ruleForm = _g.cloneJson(procedure);
                this.popShow = true;
                this.$refs.procedureRulesName.resetFields();
            },

            Del(id) {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        let data = {id: id};
                        this.apiPost("Operation/procedureDel", data).then(res => {
                            if (!res.error) {
                                this.$message({
                                    type: "success",
                                    message: res.msg
                                });
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.msg
                                });
                            }
                            this.getDetail();
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },

            submitForm() {
                this.$refs.procedureRulesName.validate((valid) => {
                    if (valid) {
                        this.popShow = false;
                        let data = this.ruleForm;
                        this.apiPost("Operation/procedureAdd", data).then(res => {
                            let remind = res.error ? "error" : "success";
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.getDetail();
                            } else {
                                this.popShow = true;
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>

<style>
    .add {
        width: 25px;
        height: 25px;
        background: url(../../../img/add.png) no-repeat;
        background-size: 100%;
        cursor: pointer;
    }

    .det {
        background: url(../../../img/detail.png) no-repeat;
    }

    .record {
        background: #FFFFFF;
    }

    .pop-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
    }

    .pop-wrapper .pop {
        position: relative;
        padding-bottom: 20px;
        width: 30%;
        border-radius: 10px;
        background: #FFFFFF;
    }

    .pop-wrapper .pop h3 {
        text-align: center;
        padding: 10px 0;
        color: #333;
    }

    .pop-wrapper .pop .hide {
        position: absolute;
        top: 10px;
        right: 15px;
        cursor: pointer;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: .5s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }
</style>